	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	#app{
		padding-bottom: 60px;
	}
	.topic {
		padding: 8px 16px;
		
	}

	.topic__header {
		font-size: 16rpx;
		font-weight: bold;
		color: #333;
	}

	.topic__user {
		margin-top: 8px;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.topic__user-avatar {
		width: 32px;
		height: 32px;
		border-radius: 50%;
	}

	.topic__user-right {
		padding-left: 16px;
	}

	.topic__user-name {
		font-size: 12px;
		color: #333;
	}

	.topic__user-date {
		font-size: 12px;
		color: #999;
		line-height: 1;
		padding-top: 4px;
	}

	.topic__user-view {
		padding-left: 8px;
	}

	.topic__user-footer {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 4px;
	}

	.topic__content {
		padding: 16px 0;
	}

	.topic-comments {
		background-color: #f5f5f5;
		padding-top: 16px;
	}

	.topic-comments__title {
		font-size: 16px;
		font-weight: bold;
		background-color: #fff;
		padding: 8px 16px;
		color: #333;
	}

	.topic-comments__item {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		padding: 8px 16px 8px;
	}

	.topic-comments__avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.topic-comments__right {
		flex: 1;
		padding-left: 16px;
	}

	.topic-comments__name {
		font-size: 14px;
		color: #999;
	}

	.topic-comments__content {
		font-size: 14px;
		color: #333;
		padding-top: 4px;
	}

	.topic-comments__author {
		color: #fff;
		background-color: #6ba44e;
		padding: 2px 6px;
		font-size: 12px;
		border-radius: 4px;
		margin-left: 8px;
	}
	.topic-comments__footer{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-top: 4px;
	}
	.topic-comments__date {
		font-size: 12px;
		color: #999;
	}
	.topic-comments__icon {
		width: 20px;
		height: 20px;
		margin-right: 4px;
	}
	.topic-comments__icon + .topic-comments__icon {
		margin-left: 16px;
	}
	.topic-comments__up {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 14px;
		color: #999;
		line-height: 1;
	}
	.topic__footer{
		
		width: 100%;
		height: 50px;
		background-color: #fff;
		
		border-top: solid 1px #F3F3F8;
	}
	.topic__footer-fixed{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.topic__footer{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 16px;
	}
	.topic__footer-input{
		background-color: #F3F3F8;
		flex: 1;
		height: 32px;
		line-height: 1;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 8px;
		border-radius: 8px;
		font-size: 12px;
		color: #999;
		outline: none;
	}
	input.topic__footer-input{
		color: #333;
		border: solid 1px #eee;
	}
	.topic__footer-input-icon {
		width: 12px;
		height: 12px;
		margin-right: 4px;
	}
	.topic__footer-icon {
		width: 24px;
		height: 24px;
		margin-left: 16px;
	}
	.topic-comments__all {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #999;
		background-color: #fff;
		padding: 8px;
	}
	.topic-comments__line {
		width: 80px;
		background-color: #ddd;
		height: 1px;
	}
	.topic-comments__tips {
		padding: 0 8px;
	}
	.topic-comments__second {
		padding-left: 56px;
		background-color: #fff;
	}
	.topic__footer-reply {
		font-size: 0;
		line-height: 0;
		position: relative;
	}
	.topic__footer-reply-tag {
		font-size: 10px;
		line-height: 1;
		position: absolute;
		right: 0%;
		transform: translateX(50%);
		top: -4px;
		background-color: red;
		color: #fff;
		padding: 2px 4px;
		display: block;
		border-radius: 6px;
	}